<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>测试天气API接口</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/cssReset.css" />
		<style type="text/css">
			#center {
				padding: 10px;
			}
			
			#allmap {
				width: 100%;
				height: 200px;
			}
			.top div{
				margin-top: 5px;
			}
			dl dd{
				margin-bottom: 30px;
			}
		</style>
	</head>

	<body>
		<div id="allmap"></div>
		<p id="loca_difang"></p>
		<label>城市：</label>
		<input type="text" name="city" id="city" value="西青" placeholder="请输入你要查询的城市" />
		<button onclick="chaxun()">查询</button>
		<div id="center">
			<div class="top">
				<div class="">
					<span>你查询的地区是：</span>
					<span class="city_cent"></span>
				</div>
				<div class="">
					<span>当前温度：</span>
					<span class="tem"></span>
				</div>
				<div>
					<span>注意事项：</span>
					<span class="ganmao"></span>
				</div>
			</div>
			<dl id="weather">
				<dt>具体情况</dt>
				<dd class="clone_dd" style="display: none;">
					<div id="">
						<span>日期：</span>
						<span class="date"></span>
					</div>
					<div id="">
						<span>天气：</span>
						<span class="type"></span>
					</div>
					<div id="">
						<span>温度：</span>
						<span class="temperature"></span>
					</div>
					<div id="">
						<span>风向：</span>
						<span class="wind"></span>
					</div>
				</dd>
			</dl>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FDc4QsLub1q32SRZ8fB07yz7W8HLOdof"></script>
	<script type="text/javascript">
		function chaxun() {
			var city = $("#city").val();
			tianqi(city);
		}

		function tianqi(city) {
			$.ajax({
				type: "get",
				//url:"https://www.sojson.com/open/api/weather/json.shtml?city=天津",
				url: "http://wthrcdn.etouch.cn/weather_mini?city=" + city,
				async: true,
				datatype: "jsonp",
				success: function(data) {
					console.log(data);
					var data = JSON.parse(data);
					//console.log(data.status);
					if(data.status == 1000) {
						$(".city_cent").text(data.data.city);
						$(".tem").text(data.data.wendu + "℃");
						$(".ganmao").text(data.data.ganmao);
						
						for(var i = 0; i < data.data.forecast.length; i++) {
							console.log(i)
							var clone = $(".clone_dd").eq(0).clone();
							clone.find(".date").text(data.data.forecast[i].date);
							clone.find(".type").text(data.data.forecast[i].type);
							clone.find(".temperature").text(data.data.forecast[i].low+"~"+data.data.forecast[i].high);
							clone.find(".wind").text(data.data.forecast[i].fengxiang + data.data.forecast[i].fengli);
							
							$("#weather").append(clone.show());
						}
					} else {
						alert("请检查您输入的城市，或者稍后再试");
					}
				}
			});
		}
	</script>
	<script type="text/javascript">
		// 百度地图API功能
		var map = new BMap.Map("allmap");
		var point = new BMap.Point(116.331398, 39.897445);
		map.centerAndZoom(point, 15);
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r) {
			if(this.getStatus() == BMAP_STATUS_SUCCESS) {
				var mk = new BMap.Marker(r.point);
				map.addOverlay(mk); //标出所在地
				map.panTo(r.point); //地图中心移动

				var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
				var gc = new BMap.Geocoder();
				gc.getLocation(point, function(rs) {
					console.log(rs.address);
					var addComp = rs.addressComponents;
//					console.log(rs.address); //地址信息
//					alert(rs.address); //弹出所在地址
//					alert("您所在的区："+rs.addressComponents.district);
					$("#loca_difang").text(rs.address);
					$("#city").val(rs.addressComponents.district);
				});
			} else {
				alert('failed' + this.getStatus());
			}
		}, {
			enableHighAccuracy: true
		})
	</script>
</html>